/** sagabuilder 
 * v0.02
 * created by Andrew Wooldridge
 * triptych@gmail.com
 */

 /** create global obj **/

sb = {
	log: function(msg){
		console.warn(msg);
	},
	init: function(){
		sb.log("SagaBuilder v0.02 starting up");
		sb.populateElements();
		sb.bindEvents();
	},
	showPanel: function(panelid){
		sb.log("[showPanel] - panelid: "+ panelid)
		$(".panel").addClass("hidden");
		$(panelid).removeClass("hidden");
	},
	bindEvents: function(){
		//jquery UI setups
		$("#scenes").tabs();
		
		//user actions
		$(".option").live("click",function(){
			sb.showPanel($(this).attr("href")); // show the panel
			$($(this).attr("href")).data("startup").fn(); //init any helper functions
		});
		
		$(".dgbl").draggable();
		$(".drp").droppable({
			drop: function(event, ui) {
				$(this).html('Dropped!');
			}

		});
		
		
		//data bindings
		$("#testing").data("startup",{fn: function(){
			sb.log("#testing starting up")
			//sb.showActors();
			//sb.buildScenes();
		}});
		
		$("#intro").data("startup", {fn: function(){
			sb.showIntroText();
		}})
	},
	showIntroText: function(){
		sb.log("intro start");
		$("#intro p").animate({"opacity":1},1000, function(){
			$(this).addClass("animate");
		})
	},
	populateElements: function(){
		var els = $("#story-elements");
		els.html(" ");
		for(i = 0; i< 10; i++){
			els.append("<li class='element dgbl'>Element # "+i+"</li>");
		}
	}
};

 $(document).ready(function(){
 	sb.init();
 });



 xsb = {
 	init: function(){
		console.warn("init!");
		sb.bindEvents();
		//$(".panel").droppable()
	},
	log: function(msg){
		console.warn(msg)
	},
	showPanel: function(panelid){
		$(".panel").addClass("hidden");
		$(panelid).removeClass("hidden");
	},
	bindEvents: function(){
		$(".option").live("click",function(){
			sb.showPanel($(this).attr("href"));
			$($(this).attr("href")).data("startup").fn();
		});
		
		$("#stage").data("startup",{fn: function(){
			sb.showActors();
			sb.buildScenes();
		}});

	},

	buildScenes: function(){
		var scenes = $(".scenes")
		
		scenes.html("")
		for(i=0; i< 5; i++){
			scenes.append($("<li><div class=''>SCENE #"+i+"</div></li>"));
		}
		
	},
	showActors: function(){
		//get Actors region
		/**
		var actorslist = $("ul#actorlist")
		for(i = 0; i< 5 ; i++){
			actorslist
			.html("")
			.append($("<li>")
			.html("Hero #"+i)
			.draggable()
			)
		}
		**/
		
		var elements = $(".elements");
		elements
			.html("")
			
		for(i=0; i<5; i++){
			elements.append($("<li><div>ELEMENT #"+i+"</div></li>").draggable());
		}	
			
	}
 }

 /**


 
 $(function() {
		$("#tabs").tabs();
});
**/

